<template lang="pug">
.cp-product-struct(v-loading="loading")
  el-card.card
    .card-header(slot="header")
      span(v-text="title")
      i.btn.el-icon-edit(type="text", @click="editTree", v-show="!editing")
    .card-body
      el-tree.tree-wrap(:data="tree", node-key="id", :props="limitProps", default-expand-all, :expand-on-click-node="!editing")
        .custom-tree(slot-scope="{ node, data }")
          span(v-show="!editing") {{ data.label }}
          el-input(v-show="editing", placeholder="部门名称", v-model="data.label", :disabled="showIcon(data.id, -1, 1)")
          span.icon-wrap(v-show="editing")
            i.el-icon-plus(v-show="showIcon(data.id, 0, 3)", @click="() => addNode(data)")
            i.el-icon-delete(v-show="showIcon(data.id, 1, 1)", @click="() => removeNode(node, data)")
      .button-wrap(v-show="editing")
        el-button(type="primary", @click="submit") 确定
        el-button.btn-after(@click="cancel") 取消
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'productlist',
  props: {
    tree: Array,
    loading: Boolean
  },
  data() {
    return {
      limitProps: {
        children: 'children',
        label: 'label'
      },
      title: '产品结构',
      editing: false
    };
  },
  methods: {
    // direct 1 大于; 0 小于; -1 等于
    showIcon (id, direct, num) {
      switch (direct) {
        case -1:
          return (id.split('-').length === num);
        case 0:
          return (id.split('-').length < num);
        case 1:
          return (id.split('-').length > num);
        default:
          return false;
      }
    },
    editTree () {
      this.editing = true;
    },
    submit () {
      try {
        this.validData(this.tree[0]);
      } catch (error) {
        console.log(error);
        return;
      }
      this.$emit('submit');
      this.editing = false;
    },
    cancel () {
      this.data = this.cache;
      this.editing = false;
    },
    validData (data) {
      if (data.children && data.children.length) {
        data.children.forEach((child) => {
          if (!child.label) {
            this.$message.error('产品结构中不能有空');
            // 阻止forEach循环
            throw new Error();
          }
          this.validData(child);
        });
      }
    },
    addNode (data) {
      let id = '';
      const len = data.children.length;
      if (len > 0) {
        const last = data.children[len - 1].id;
        const arr = last.split('-');
        const prev = arr[arr.length - 1];
        id = `${data.id}-${Number(prev) + 1}`;
      } else {
        id = `${data.id}-1`;
      }
      const newChild = { id, children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },

    removeNode (node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
  },
  computed: {
    ...mapGetters([])
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
.cp-product-struct
  height: 100%
  .card
    position: relative
    min-height: 100%
  .el-card
    box-shadow: none
  .el-card__header
    padding: 12px 20px
    background-color: #F2F2F2
  .card-header
    text-align: center
    position: relative
    .btn
      position: absolute
      right: 0
      top: 50%
      font-size: 20px
      margin-top: -10px
      cursor: pointer
      &:hover
        color: #5D9BFB
  .tree-wrap
    margin-bottom: 15px
  .el-tree-node__content
    height: 36px
  .el-tree-node:focus>.el-tree-node__content, .el-tree-node__content:hover
    background-color: transparent
  .custom-tree
    flex: 1
    display: flex
    align-items: center
    justify-content: space-between
    font-size: 14px
    padding-right: 8px
    height: 32px
    line-height: 32px
    .el-input
      max-width: 150px
    .icon-wrap
      i
        font-size: 16px
        font-weight: 500
        cursor: pointer
        margin-left: 3px
        margin-right: 3px
        &:hover
          color: #5D9BFB
    .ml
      margin-left: 14px
  .button-wrap
    text-align: center
    .btn-after
      margin-left: 40px
</style>
